<template>
    <article class="register-dialog" v-show="showDialog">
        <div class="register-wrap" v-show="showInfo">
            <div class="info-box">
                <div class="info-box-head">
                    <h2>填写信息</h2>
                </div>
                <div class="info-box-container">
                    <div class="form-wrap">
                        <ul>
                            <li>
                                <span>*</span>
                                <input type="text" placeholder="企业名称" v-model.trim="companyName">
                            </li>
                            <li>
                                <span>*</span>
                                <input type="tel" placeholder="联系电话" v-model.trim="phoneNumber">
                            </li>
                            <li>
                                <span></span>
                                <input type="text" placeholder="联系人" v-model="linkman">
                            </li>
                            <li>
                                <span></span>
                                <input type="text" placeholder="公司地址" v-model="companyAdress">
                            </li>
                            <li class="textarea">
                                <textarea rows="4" cols="50" placeholder="留言" v-model="remark"></textarea>
                            </li>
                        </ul>
                        <input type="submit" class="submit" @click="submit">
                    </div>
                </div>
            </div>
            <div class="close-btn" @click="closeDialog"></div>
        </div>
        <div class="result-wrap" v-show="showResultInfo">
            <div class="result-info">
                <div class="icon-wrap">
                    <svg width="200px" height="200px" class="mysvg">
                        <circle r="90" class="circle" fill="#5A7AF9" cx="100" cy="100"></circle>
                        <polyline  fill="none" stroke="#fff" stroke-width="10" points="44,107 86,137 152,69" stroke-linecap="round" stroke-linejoin="round" class="tick" ></polyline>
                    </svg>
                </div>
                <b>提交成功</b>
                <p>我们将有专业的顾问联系您，请稍等！</p>
                <div class="know-btn" @click="closeDialog">
                    知道了({{countDown}}s)
                </div>
            </div>
            <div class="close-btn" @click="closeDialog"></div>
        </div>
    </article>
</template>
<script>
export default {
    props:{
        showDialog:{
            type:Boolean,
            default:false
        }
    },
    data(){
        return{
            // showInfo:true,
            // showResultInfo:false,
            showInfo:false,
            showResultInfo:true,
            companyName:'', // 企业名字
            phoneNumber:'', // 电话
            linkman:'',     //  联系人
            companyAdress:'',   //公司地址
            remark:'',      // 留言
            countDown:3,
            interval:'',
        }
    },
    methods:{
        // 关闭弹框
        closeDialog(){
            this.reset()
            this.$emit('close');
        },
        // 提交
        submit(){
            this.verify().then(res=>{
                console.log(res);
            }).catch(res=>{
                console.log(res);
            })
                this.showInfo = false;
                this.showResultInfo = true;
                this.countDownHandle();
            
            
        },
        // 发送请求
        requestHandler(){

        },
        // 计时器
        countDownHandle(){
            this.interval = setInterval(()=>{
                if(!this.countDown){
                    this.reset();
                    this.countDown =4;
                    this.$emit('close');
                }
                this.countDown--;
            },1000)
        },
        // 重置
        reset(){
            this.companyName ='';
            this.phoneNumber ='';
            this.linkman ='';
            this.companyAdress ='';
            this.remark ='';
            this.countDown =3;
            this.showInfo =true;
            this.showResultInfo =false;
            clearInterval(this.interval);
        },
        // 校验
        verify(){
            if(!this.companyName) return Promise.reject('请输入企业名称');
            if(!/^1[3456789]\d{9}$/.test(this.phoneNumber)) return Promise.reject('请输入正确的电话号码');
            return Promise.resolve();
        },
    }
}
</script>
<style lang="less" scoped>
@import '../assets/css/variable.less';
.register-dialog{
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, .8);
    z-index: 100;
    .result-wrap{
        position: absolute;
        width: 518 * @crem;
        height: 532 * @crem;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto;
        display: flex;
        flex-flow: column nowrap;
        justify-content: space-between;
        align-items: center;
        .icon-wrap{
            margin: 0 auto;
            width: 200 * @crem;
            height: 100 * @crem;
            background: url('../assets/imgs/home/star.png') center no-repeat;
            background-size: cover;
            position: relative;
            .mysvg{
                position: absolute;
                left: 50%;
                top: 50%;
                transform: translate(-50%,-50%) scale(.4);
            }
            .circle {
                stroke-dasharray: 1194;
                stroke-dashoffset: 1194;
                /* animation: circle 1s ease-in-out;
                animation-fill-mode: forwards; */
            }

            .tick {
                stroke-dasharray: 350;
                stroke-dashoffset: 350;
                animation: tick 1s ease-out;
                animation-fill-mode: forwards;
                animation-delay: .5s;
            }
            @keyframes tick {
                from {
                    stroke-dashoffset: 350;
                }
                to {
                    stroke-dashoffset: 0;
                }
            }
            @media screen and(max-width: 1680px) {
                .mysvg{
                    transform: translate(-50%,-50%) scale(.3);
                }
            }
            @media screen and(max-width: 1020px) {
                .mysvg{
                    transform: translate(-50%,-50%) scale(.2);
                }
            }

        }
        .result-info{
            width: 100%;
            height: 442 * @crem;
            background: #fff;
            border-radius: 20 * @crem;
            padding-top: 40 * @crem;
            box-sizing: border-box;
            .icon-shotline{
                position: absolute;
                top: 60%;
                left: 37%;
                transform: translate(-50%,-50%) rotate(45deg);
                background: #fff;
                transition: width .3s;
                width: 25 * @crem;
                height: 6 * @crem;
                border-radius: 3 * @crem 0 0 3 * @crem;
                animation: shotline 1s;
            }
            .icon-longline{
                position: absolute;
                top: 52%;
                left: 9%;
                transform: translate(50%,-50%) rotate(-45deg);
                background: #fff;
                width: 50 * @crem;
                height: 6 * @crem;
                border-radius: 0 3 * @crem 3 * @crem 0 * @crem;
                // transform: rotate(-45deg) translate(4 * @crem,10 * @crem);
                animation: longline .5s .3s;
                // transition: width 1s;
            }
            b{
                display: inline-block;
                font-size: 34 * @crem;
                color: #666666;
                letter-spacing: 2px;
                margin-top: 20 * @crem
            }
            p{
                font-size: 24 * @crem;
                color: #9C9C9C;
                margin-top: 40 * @crem;
            }
            .know-btn{
                margin: 0 auto;
                margin-top: 47 * @crem;
                width: 248 * @crem;
                height: 74 * @crem;
                line-height: 74 * @crem;
                text-align: center;
                color: #fff;
                font-size: 30 * @crem;
                font-weight: 300;
                border-radius: 37 * @crem;
                box-shadow: 0px 6 * @crem 27 * @crem 0 * @crem rgba(32, 36, 161, 0.27);
                background: linear-gradient(117deg, #BE7EF1, #5B60F9);
            }
        }
    }
    @media screen and(max-width: 1024px){
        .result-wrap{
            height: 600 * @crem;
        }
        .result-info{
            height: 500 * @crem !important;
        }
    }
    .close-btn{
            width: 60 * @crem;
            height: 60 * @crem;
            border-radius: 30 * @crem;
            border: 2px solid #FFFFFF;
            position: relative;
    }
    .close-btn::before,.close-btn::after{
        content: '';
        display: block;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        margin: auto;
        width: 34 * @crem;
        height: 4 * @crem;
        border-radius: 2 * @crem;
        background: #fff;
        transform: rotate(45deg);
    }
    .close-btn::after{
        transform: rotate(-45deg);
    }
    .register-wrap{
        width: 518 * @crem;
        height: 779 * @crem;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto;
        display: flex;
        flex-flow: column nowrap;
        justify-content: space-between;
        align-items: center;
    }
    
    .info-box{
        width: 100%;
        height: 675 * @crem;
        background: #fff;
        border-radius: 20 * @crem;
        .info-box-head{
            height: 128 * @crem;
            width: 100%;
            border-radius: 20 * @crem;
            line-height: 128 * @crem;
            text-align: center;
            border-radius: 20 * @crem;
            background: gray;
            background: url('../assets/imgs/home/register_bg.png') no-repeat;
            background-size: cover;
            h2{
                font-size: 40 * @crem;
                color: #fff;
                font-weight: bold;
                letter-spacing: 2px;
            }
        }
        
        .info-box-container{
            padding-top: 24 * @crem;
            .form-wrap{
                width: 365 * @crem;
                margin: 0 auto;
            }
            li{
                height: 48 * @crem;
                border-radius: 24 * @crem;
                box-shadow: 0px 4 * @crem 9 * @crem 0px rgba(185, 185, 185, 0.69);
                box-sizing: border-box;
                padding: 6 * @crem 23 * @crem;
                display: flex;
                flex-flow: row nowrap;
                align-items: center;
                margin-top: 13 * @crem;
                span{
                    display: inline-block;
                    padding-top: 18 * @crem;
                    padding-right: 4 * @crem;
                    min-width: 8 * @crem;
                    color: #A9A9A9;
                }
                input{
                    width: 100%;
                    height: 100%;
                    border: 0;
                    background-color: transparent;
                    outline: none;
                    color: black;
                    font-size: 16 * @crem;

                }
                input::placeholder{
                    color: #A9A9A9;
                    font-size: 16 * @crem;
                    font-weight: 500;
                }
            }
            .textarea{
                height: 160 * @crem;
                textarea{
                    font-style: normal;
                    font-family: 'Arial';
                    height: 100%;
                    width: 100%;
                    border: 0;
                    background-color: transparent;
                    outline: none;
                    text-indent: 1em;
                    resize:none;
                    // color: #A9A9A9;
                }
                textarea::placeholder{
                    font-family: 'Arial';
                    font-style: normal;
                    color: #A9A9A9;
                    font-size: 16 * @crem;
                    font-weight: 500;
                }
            }
            .submit{
                width: 100%;
                height: 57 * @crem;
                margin-top: 21 * @crem;
                font-size: 28 * @crem;
                color: #F1F1F1;
                font-weight: bold;
                letter-spacing: 2px;
                cursor: pointer;
                border: none;
                outline: none;
                border-radius: 26 * @crem;
                box-shadow: 0px 7 * @crem 13 * @crem 0px rgba(142, 142, 142, 0.43);
                background: linear-gradient(117deg, #BE7EF1, #5B60F9);
            }
        }
    }
}
</style>